<template>
  <div class="detail" v-if="Content">
    <div class="detail-main">
      <div class="crumbs-nav">
        <a href="/">猫眼电影</a>
        &nbsp;>&nbsp;
        <span v-if="MovieDetailList">{{MovieDetailList.movie.nm}}</span>
      </div>
      <div class="movue-info-top">
        <div class="movie-cover">
          <img :src="MovieDetailList.movie.img" width="100" height="138" />
        </div>
        <div class="movie-desc">
          <div class="movie-desc-top">
            <div class="movie-cn-name">{{MovieDetailList.movie.nm}}</div>
            <div class="movie-en-name">{{MovieDetailList.movie.enm}}</div>
            <div class="movie-other-info">
              <div class="movie-type">{{MovieDetailList.movie.cat}}</div>
              <div class="actors=name">{{MovieDetailList.movie.star}}</div>
              <div
                class="movie-show-time"
              >{{MovieDetailList.movie.pubDesc}} / {{MovieDetailList.movie.episodeDur}}分钟</div>
            </div>
          </div>
        </div>
      </div>
      <div class="brief-introduction">
        <div class="title">
          <span>简介</span>
          <div class="btn" @touchstart="LineClamp">{{Clamp}}</div>
        </div>
        <div class="content">
          <p :class="{'line-clamp':flag}">{{MovieDetailList.movie.dra}}</p>
        </div>
      </div>
      <div class="actors">
        <div class="title">演职人员</div>
        <van-swipe :loop="false" :width="80" :show-indicators="false">
          <van-swipe-item v-for="(item,index) in celebritiesData" :key="index">
            <div class="actors-item">
              <img :src="item.avatar" alt width="80" height="112" />
              <span class="name">{{item.cnm}}</span>
              <span class="role">{{item.desc}}</span>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="hotComments">
        <div class="title">
          <span>短评</span>
        </div>
        <div class="comments">
          <div
            class="comments-content"
            v-for="(ele,i) in MovieDetailList.comments.hotComments"
            :key="i"
          >
            <div>
              <img class="avatar" :src="ele.avatarUrl" width="34" height="34" alt />
            </div>
            <div class="right">
              <div class="top">
                <div class="name-box">
                  <span class="name">{{ele.nick}}</span>
                  <span class="level">Lv{{ele.userLevel}}</span>
                </div>
                <div class="appove">
                  <img
                    src="https://p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
                    width="10"
                    height="10"
                    alt
                  />
                  <span class="approve-word">{{ele.upCount}}</span>
                </div>
              </div>
              <div class="middle">
                <span class="comment-content">{{ele.content}}</span>
              </div>
              <div class="bottom">
                <div class="reply">
                  {{ele.replyCount}}
                  <span>回复</span>
                </div>
              </div>
              <div class="separator-line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "detail",
  data() {
    return {
      flag: true,
      movieid: "",
      Content: false,
      Clamp: "展开",
      MovieDetailList: [],
      celebritiesData: []
    };
  },
  created() {
    this.movieid = this.$route.params.MovieId;
    this.GetDetail(this.movieid);
  },
  watch: {
    MovieDetailList() {
      this.Content = true;
    }
  },
  methods: {
    LineClamp() {
      if (this.flag == true) {
        this.Clamp = "收起";
      } else {
        this.Clamp = "展开";
      }
      this.flag = !this.flag;
    },
    GetDetail(movieid) {
      this.axios({
        method: "get",
        url: "movie/detail",
        params: {
          movieid: movieid
        }
      }).then(ref => {
        this.MovieDetailList = ref.data;
        this.celebritiesData = ref.data.celebrities;
        this.celebritiesData.forEach(element => {
          let ele = element.avatar.replace("/w.h/", "/170.230/");
          element.avatar = ele;
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.detail {
  background-color: rgb(64, 38, 41);
}
.detail-main {
  height: 100%;
}
.crumbs-nav {
  font-size: 13px;
  padding-top: 20px;
  padding-left: 18px;
  color: #ccc;
  a {
    color: #ccc;
  }
}
.movue-info-top {
  padding: 15px;
  display: flex;
  overflow: hidden;
  .movie-cover {
    width: 2rem;
  }
  .movie-desc {
    margin-left: 40px;
    .movie-desc-top {
      .movie-cn-name {
        font-size: 0.6rem;
        color: rgb(255, 255, 255);
        margin-bottom: 15px;
      }
      .movie-en-name {
        color: #ccc;
      }
      .movie-other-info {
        line-height: 30px;
        color: #ccc;
      }
    }
  }
}
.brief-introduction {
  color: rgb(255, 255, 255);
  padding: 0 18px;
  .title {
    display: flex;
    justify-content: space-between;
    .btn {
      button {
        border: none;
      }
    }
  }
  .content {
    font-size: 15px;
    line-height: 0.8rem;
    overflow: hidden;
    .line-clamp {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
.actors {
  padding: 18px;
  .title {
    font-size: 14px;
    color: rgb(255, 255, 255);
    margin-bottom: 8px;
  }
  .actors-item {
    flex-direction: column;
    display: flex;
    text-align: center;
    .name {
      color: rgb(255, 255, 255);
    }
    .role {
      margin-top: 3px;
      color: #ccc;
    }
  }
}
.hotComments {
  background-color: #fff;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  overflow: hidden;
  margin-top: -0.24rem;
  position: relative;
  .title {
    font-size: 15px;
    color: #333;
    padding: 20px 20px;
  }
  .comments {
    .comments-content {
      padding: 0.3rem;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .avatar {
        border-radius: 0.34rem;
      }
      .right {
        margin-left: 20px;

        .top {
          width: 300px;
          line-height: 40px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          .name-box {
            .name {
              font-size: 12px;
              color: #333;
              margin-right: 10px;
            }
            .level {
              font-size: 15px;
              color: rgb(255, 180, 0);
            }
          }
          .appove {
            border: 1px solid #ccc;
            border-radius: 0.26rem;
            text-align: center;
            height: 0.52rem;
            line-height: 0.52rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 0 0.2rem;
            .approve-word {
              margin-left: 3px;
            }
          }
        }
        .middle {
          margin-top: 3px;
          .comment-content {
            font-size: 14px;
            color: #333;
            line-height: 0.42rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
          }
        }
        .bottom {
          margin-top: 10px;
          font-size: 12px;
          color: #666;
          .reply {
            display: inline-block;
            background: #eef1f6;
            border-radius: 0.21rem;
            text-align: center;
            font-size: 0.24rem;
            color: #5a7cab;
            padding: 0.04rem 0.12rem;
            margin-left: 0.16rem;
          }
        }
        .separator-line {
          margin-top: 10px;
          border-bottom: 1px solid #e8e8e8;
          transform: scaleY(0.5);
          transform-origin: 0 0;
        }
      }
    }
  }
}
</style>